<!-- 文件夹详情 -->
<template>
  <div class="folder-detail-container">
    <div class="folder-detail-content">
      <div class="f-info">
        <div class="f-info__statistics">
          <div class="f-info__statistics_title">
            {{ $t("tool.modelManage.basicInfo") }}
          </div>

          <div class="f-info__statistics_content">
            <div class="f-info__statistics_item">
              <div class="f-info__statistics_item_num">{{ form[getCurrentFormValue('name')] }}</div>
              <div class="f-info__statistics_item_name">{{ $t('tool.modelManage.chineseName') }}</div>
            </div>
            <div class="f-info__statistics_item">
              <div class="f-info__statistics_item_num">{{ form[getCurrentFormValue('englishName')] }}</div>
              <div class="f-info__statistics_item_name">{{ $t('tool.modelManage.englishName') }}</div>
            </div>
            <div class="f-info__statistics_item">
              <div class="f-info__statistics_item_num">{{ form.createTime }}</div>
              <div class="f-info__statistics_item_name">{{ $t('basic.createTime') }}</div>
            </div>
            <div class="f-info__statistics_item">
              <div class="f-info__statistics_item_word">
                {{ form[getCurrentFormValue('description')] || "暂无描述" }}
              </div>
              <div class="f-info__statistics_item_name">{{ $t('tool.modelManage.folderDescription') }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {
  updateModel,
  updateModelData,
  updateGlobalData,
} from "@/api/myspace/model-manage-tool/model-manage";
import { mapState } from "vuex";
export default {
  data() {
    return {
      form: {},
    };
  },
  props: {
    nodeInfo: {
      type: Object,
    },
    flag: {
      type: String,
    },
    treeData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      sharingMethodsOptions: (state) =>
        state.modelManageTool.sharingMethodsOptions,
    }),
  },
  watch: {
    nodeInfo: {
      handler(newValue) {
        if (!newValue) return;
        this.form = newValue.data;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.form = this.nodeInfo.data;
  },
  methods: {
    // 获取当前表单绑定的数据
    getCurrentFormValue(param) {
      if (this.flag == "modelManage") {
        switch (param) {
          case "name":
            return "modelName";
          case "description":
            return "modelDescription";
          case "englishName":
            return "modelEnglishName";
        }
      } else if (this.flag == "dataModeling") {
        switch (param) {
          case "name":
            return "modelDataName";
          case "description":
            return "modelDataDescription";
          case "englishName":
            return "dataEnglishName";
        }
      } else if (this.flag == "global") {
        switch (param) {
          case "name":
            return "globalDataName";
          case "description":
            return "globalDataDescription";
          case "englishName":
            return "globalEnglishName";
        }
      } else if (this.flag == "digitalMachine") {
        switch (param) {
          case "name":
            return "digitalMachineName";
          case "description":
            return "digitalMachineDescribe";
          case "englishName":
            return "digitalMachineEnglishName";
        }
      }
    },
    submitForm() {
      if (this.flag == "modelManage") {
        updateModel(this.form).then((response) => {
          if (response.code == 200) {
            this.$message.success(
              this.$toolHandle.getI18nName(
                this.$zh.setup.responseText,
                this.$en.setup.responseText,
                this.$i18n.locale,
                "success"
              )
            );
            this.$emit("refresh");
          }
        });
      } else if (this.flag == "dataModeling") {
        updateModelData(this.form).then((response) => {
          if (response.code == 200) {
            this.$message.success(
              this.$toolHandle.getI18nName(
                this.$zh.setup.responseText,
                this.$en.setup.responseText,
                this.$i18n.locale,
                "success"
              )
            );
            this.$emit("refresh");
          }
        });
      } else if (this.flag == "global") {
        updateGlobalData(this.form).then((response) => {
          if (response.code == 200) {
            this.$message.success(
              this.$toolHandle.getI18nName(
                this.$zh.setup.responseText,
                this.$en.setup.responseText,
                this.$i18n.locale,
                "success"
              )
            );
            this.$emit("refresh");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.folder-detail-container {
  width: 100%;
  height: 65%;
  box-sizing: border-box;

  .folder-detail-content {
    width: 100%;
    height: 85%;
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
    box-sizing: border-box;

    .f-info {
      width: 80%;

      .f-info__statistics {
        border-radius: 5px;
        padding: 10px 20px;
        background-color: var(--ui-component-background-alt);
        margin-bottom: 30px;

        .f-info__statistics_title {
          font-size: var(--ui-font-size-base);
        }

        .f-info__statistics_content {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          flex-wrap: wrap;

          .f-info__statistics_item {
            .f-info__statistics_item_num {
              font-size: var(--ui-font-size-title);
              color: var(--ui-text-color);
            }

            .f-info__statistics_item_word {
              font-size: var(--ui-font-size-base);
              color: var(--app-text-fg-low);
            }

            .f-info__statistics_item_name {
              font-size: var(--ui-font-size-sm);
              color: var(--app-text-fg-low);
              margin-top: 10px;
              margin-bottom: 20px;

            }
          }

          & :last-child {
            width: 100%;
          }
        }

      }

    }
  }
}
</style>